<!DOCTYPE html>
<html lang="zh-cmn-Hans">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<script type="text/javascript" src="Plug/jquery-1.11.3.min.js"></script>
		<title>发布约拍</title>
		<script src="Plug/layer-v3.1.1/layer.js" type="text/javascript" charset="utf-8"></script>
		<!--layer  弹框插件-->
		<link rel="stylesheet" href="static/css/base/reset.css" />
		<!--jqyery-weiui插件 -->
		<link rel="stylesheet" href="Plug/jquery-weui/jquery-weui.min.css">
		<link rel="stylesheet" href="Plug/jquery-weui/weui.min.css">
		<script src="Plug/jquery-weui/js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="Plug/jquery-weui/js/city-picker.js" type="text/javascript" charset="utf-8"></script>
		<!--轮播插件-->
		<link rel="stylesheet" type="text/css" href="Plug/swiper/swiper.min.css" />
		<script src="Plug/swiper/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<!--重置样式-->
		<link rel="stylesheet" href="static/css/base/main.css" />
		<!--公共样式-->
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_990287_96c88nyl5x7.css" />
		<!--阿里云图标库-->
		<script src="static/js/base.js" type="text/javascript" charset="utf-8"></script>
		<!---------------公共导入分割线------------------------>
		<!--本页样式-->
		<link rel="stylesheet" type="text/css" href="static/css/release/release.css" />
	</head>

	<body>
		<!--存在bar加此wrap-->
		<div class="have_bar_wrap">
			<div class="top_head flex_cb">
				<a class="back" href="javascript:void(0)"><i class="iconfont icon-xuanzeqishangyige"></i></a>
				<span>发布约拍</span>
			</div>
			<div class="yp_list">
				<input class="yp_name" placeholder="标题名称" type="" name="" id="" value="" />
				<textarea class="yp_describe" placeholder="输入你的约拍要求，尽可能详细" name="" rows="" cols=""></textarea>
			</div>
			<ul class="fill_data_list">
				<li>
					<i class="iconfont icon-fenlei"></i><span>需求</span>
					<input id="xuqiu" placeholder="请选择您的需求" type="" name="" id="" value="" />
					<i class="iconfont icon-xuanzeqixiayige"></i>
				</li>
				
				<li>
					<i class="iconfont icon-fenlei"></i><span>拍摄时间</span>
					<input id="time" placeholder="你期望的拍摄时间（选填）" type="" name="" id="" value="" />
					<i class="iconfont icon-xuanzeqixiayige"></i>
				</li>
				<li>
					<i class="iconfont icon-fenlei"></i><span>面向地区</span>
					<input id="diqu" placeholder="请选择面向地区" type="" name="" id="" value="" />
					<i class="iconfont icon-xuanzeqixiayige"></i>
				</li>
				<li>
					<i class="iconfont icon-fenlei"></i><span>拍摄地点</span>
					<input id="address" placeholder="你期望的拍摄地点（选填）" type="" name="" id="" value="" readonly="readonly" />
					<i class="iconfont icon-xuanzeqixiayige"></i>
				</li>
				<!--<li>
					<i class="iconfont icon-fenlei"></i><span>拍摄成片</span>
					<input id="" placeholder="原片多少，精修多少等（选填）" type="" name="" id="" value="" />
					<i class="iconfont icon-xuanzeqixiayige"></i>
				</li>-->
				<li>
					<i class="iconfont icon-fenlei"></i><span>收费模式</span>
					<input id="charging_model" placeholder="请选择收费模式" type="" name="" id="" value="" />
					<i class="iconfont icon-xuanzeqixiayige"></i>
				</li>
				<li class="pay_mode">
					<span id="payname">收费金额</span>
					<input id="payInput" placeholder="请输入收费金额" type="number" name="" id="" value="" />
					<b class="fill_data_list_dw">元</b>
					<i class="iconfont icon-xuanzeqixiayige"></i>
				</li>
				
				<li>
					<i class="iconfont icon-fenlei"></i><span>约拍认证会员</span>
					<input id="huiyuan" placeholder="是否认证会员" type="" name="" id="" value="" />
					<i class="iconfont icon-xuanzeqixiayige"></i>
				</li>
				<li>
					<i class="iconfont icon-fenlei"></i><span>信用担保</span>
					<input id="danbao" placeholder="请选择信用担保" type="" name="" id="" value="" />
					<i class="iconfont icon-xuanzeqixiayige"></i>
				</li>
			</ul>
			<div class="choice_tip">
				<div class="choice_tip_tit flex_cl">
					<i class="iconfont icon-fenlei fengge_icon"></i>
					<span>主题标签（多选）</span>
				</div>
				<div class="choice_tiplist">
					<a class="choice_tip_action" href="javascript:void(0)">时尚</a>
					<a href="javascript:void(0)">性感</a>
					<a href="javascript:void(0)">暗黑</a>
					<a href="javascript:void(0)">情绪</a>
					<a href="javascript:void(0)">胶片</a>
					<a href="javascript:void(0)">校园</a>
					<a href="javascript:void(0)">纪实</a>
					<a href="javascript:void(0)">妆面</a>
					<a href="javascript:void(0)">日系</a>
					<a href="javascript:void(0)">复古</a>
					<a href="javascript:void(0)">COS</a>
					<a href="javascript:void(0)">少女</a>
					<a href="javascript:void(0)">青春</a>
					<a href="javascript:void(0)">糖水</a>
					<a href="javascript:void(0)">情侣</a>
					<a href="javascript:void(0)">爱情</a>
					<a href="javascript:void(0)">封面</a>
					<a href="javascript:void(0)">夜景</a>
					<a href="javascript:void(0)">欧美</a>
					<a href="javascript:void(0)">古风</a>
					<a href="javascript:void(0)">清新</a>
					<a href="javascript:void(0)">淘宝</a>
					<a href="javascript:void(0)">森系</a>
					<a href="javascript:void(0)">视觉</a>
					<a href="javascript:void(0)">非主流</a>
					<a href="javascript:void(0)">哥特</a>
				</div>
			</div>
			<div style="padding-top: 0;" class="yp_list add_photo">
				<div class="choice_tip_tit flex_cl">
					<i class="iconfont icon-fenlei fengge_icon"></i>
					<span>参考图片</span>
				</div>
				<a class="add_btn_yp flex_cc" href="javascript:void(0)">
					<i class="iconfont icon-tupian"></i>
					<p>添加照片</p>
				</a>
				<img src="static/images/changkuan21.png" />
				<img src="static/images/changkuan21.png" />
				<img src="static/images/changkuan21.png" />
				<img src="static/images/changkuan21.png" />
			</div>
			<a class="next_fill flex_cc" href="javascript:void(0)">立即发布</a>
		</div>
	</body>
	<script type="text/javascript">
		$(function() {
			$("#xuqiu").picker({
				title: "请选择您的需求",
				cols: [{
					textAlign: 'center',
					values: ['找模特', '找摄影师']
				}],
				onClose: function(d) {
					val = (this, d.displayValue);
					alert(JSON.stringify(val))
				}
			});
			$("#huiyuan").picker({
				title: "请选择是否会员",
				cols: [{
					textAlign: 'center',
					values: ['是', '不限']
				}],
				onClose: function(d) {
					val = (this, d.displayValue);
					alert(JSON.stringify(val))
				}
			});
			$("#danbao").picker({
				title: "请选择是否担保",
				cols: [{
					textAlign: 'center',
					values: ['是', '不限']
				}],
				onClose: function(d) {
					val = (this, d.displayValue);
					alert(JSON.stringify(val))
				}
			});
			$("#charging_model").picker({
				title: "请选择您的收费模式",
				cols: [{
					textAlign: 'center',
					values: ['希望互免', '需要收费', '愿意付费', '费用协商']
				}],
				onClose: function(d) {
					val = (this, d.displayValue);
					alert(JSON.stringify(val))
					if(val == "需要收费") {
						$(".pay_mode").css("display", "flex")
						$("#payname").text("收费金额");
						$("#payInput").attr("placeholder", "请输入收费金额");
					} else if(val == "愿意付费") {
						$(".pay_mode").css("display", "flex");
						$("#payname").text("付费金额");
						$("#payInput").attr("placeholder", "请输入付费金额");
					} else {
						$(".pay_mode").css("display", "none")
					}
				}
			});
			$("#diqu").cityPicker({
				title: "请选择地区",
				customItem: '全部',
				onClose: function(d) {
					console.log(this, d)
					city = (this, d.displayValue);
					alert(JSON.stringify(city))
				}
			});
			var today = new Date();
			//获取当前年
			var year = today.getFullYear();
			//获取当前月
			var month = today.getMonth() + 1;
			//获取当前日
			var date = today.getDate();
			var orderDate = year + '-' + month + "-" + date;
			$("#time").datetimePicker({
				times: function() {
					return [{
							values: (function() {
								var hours = [];
								for(var i = 0; i < 24; i++) hours.push(i > 9 ? i : '0' + i);
								return hours;
							})()
						},
						{
							divider: true, // 这是一个分隔符
							content: '时'
						}
					];
				},
				min: orderDate,
				onChange: function(picker, values, displayValues) {
					console.log(values);
				},
			});
			$(document).on("click", ".add_photo img", function() {
				$(this).remove();
			})
			$(document).on("click", ".choice_tiplist a", function() {
				if($(this).hasClass("choice_tip_action")) {
					$(this).removeClass("choice_tip_action");
				} else {
					$(this).addClass("choice_tip_action");
					var tipnum = $(this).parent().find(".choice_tip_action").length;
					if(tipnum > 5) {
						Msg("最多只能选择5个");
						$(this).removeClass("choice_tip_action");
						return false;
					}
				}
			})
			$(document).on("click tap", "#address", function() {
				var str = `<iframe style="position: fixed;z-index:9999;bottom:0;height: 100%;" id="mapPage" width="100%" height="100%" frameborder=0
    src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=5T3BZ-Y6733-AEN3O-YESWJ-6IUVO-O4BYD&referer=myapp">
</iframe>`;
				$(str).prependTo('body');
			})
		})
		window.addEventListener('message', function(event) {
			// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
			var loc = event.data;
			if(loc && loc.module == 'locationPicker') {
				console.log('location', loc);
				console.log("地址名称" + loc.poiname + '</br>' + "位于" + loc.poiaddress);
				$("#address").val(loc.poiaddress);
				$("#mapPage").remove();
			}
		}, false);
	</script>

</html>